<template>
	<div>
		<div class="head">
			<div class="title">
				公众墙信息管理系统
			</div>
			<div class="user" @click="handleCloseAdminP">
				<img v-if="userInfo!=null" :src="userInfo.headimg" alt="用户头像">
				<div class="name" v-if="userInfo!=null">{{userInfo.nickname}}</div>
				<a href="#" @click.stop="exitAdmin">注销</a>
			</div>
		</div>
		<div class="home-content">
			<div class="left">
				<el-row class="tac">
				  <el-col :span="24">
				    <el-menu
				      :default-active="$route.path"
				      class="el-menu-vertical-demo"
				      router
				      @open="handleOpen"
				      @close="handleClose">
						
					  <el-menu-item index="/summary">
				        <i class="el-icon-menu"></i>
				        <span slot="title">概述</span>
				      </el-menu-item>

				      <el-submenu index="/1">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>公告管理</span>
				        </template>
				        <el-menu-item-group>
				          <el-menu-item index="/notice">公告列表</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>

				      <el-submenu index="/category">
				        <template slot="title">
				          <i class="el-icon-location"></i>
				          <span>信息分类</span>
				        </template>
				        <el-menu-item-group>
				          <el-menu-item index="/category">分类列表</el-menu-item>
				          <el-menu-item index="/category/add">添加</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>

				      <el-menu-item index="/price">
				        <i class="el-icon-menu"></i>
				        <span slot="title">置顶价格</span>
				      </el-menu-item>

				      <el-menu-item index="/user">
				        <i class="el-icon-menu"></i>
				        <span slot="title">用户管理</span>
				      </el-menu-item>

				      <el-menu-item index="4" disabled>
				        <i class="el-icon-document"></i>
				        <span slot="title">导航三</span>
				      </el-menu-item>
				      
				    </el-menu>
				  </el-col>
				</el-row>
			</div>
			<div class="right">
				 <transition name="el-zoom-in-top">
					<router-view></router-view>
				</transition>
			</div>
		</div>
		<div class="footer">
			
		</div>
		<el-dialog
			title="修改管理员账号"
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="handleCloseAdminP">
			<el-form label-position="left" label-width="80px" >
				<el-form-item label="手机号">
					<el-input v-model="phone"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="password" type="password"></el-input>
				</el-form-item>
			</el-form>
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updatePhoneAndPwd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// @ 是 /src 的别名
	export default {
		name: 'Home',
		props: {

		},
		data() {
			return {
				userInfo: null,
				dialogVisible:false,
				password:'',
				phone:''
			}
		},
		created() {
			let user = JSON.parse(localStorage.getItem("userInfo"))
			this.userInfo = user
		},
		methods: {
	      handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	      },
	      handleClose(key, keyPath) {
	        console.log(key, keyPath);
	      },
				exitAdmin() {
					localStorage.removeItem("token")
					this.$router.push('/user/login')
				},
				// 设置管理员账号密码
				updatePhoneAndPwd() {
					var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
					if(this.password.trim()=='' || this.phone.trim()=='') {
						 this.$notify.error({
								title: '错误',
								message: '手机号或密码不能为空'
							});
						return false;
					}
					if (!myreg.test(this.phone.trim())) {
						this.$notify.error({
							title: '错误',
							message: '手机号格式不正确'
						});
						return false;
					}
					if (this.password.trim().length<6) {
						this.$notify.error({
							title: '错误',
							message: '密码至少6位'
						});
						return false;
					}
					
					this.axios.get('/admin/updatePasswordAdmin?phone='+this.phone.trim()+'&password='+this.password.trim()+'&token='+localStorage.getItem("token"))
					.then(()=>{
						this.$notify.success({
							title: '操作成功',
							message: '管理员密码已修改'
						});
						this.dialogVisible=false
					})
					.catch(()=>{
						this.$notify.error({
							title: '错误',
							message: '管理员密码修改失败'
						});
					}) 
					
				},
				handleCloseAdminP(){
					this.dialogVisible=!this.dialogVisible;
				}
	    },
			
	}
</script>

<style scoped lang="styl">
	@import "../assets/css/base"

	page{
		text-decoration
		
	}
	.head
		background $Primary
		padding 0px 0 20px
		.title
			height 100px
			color #fff
			margin-bottom 20px
			font-size 40px
			text-align center
			line-height 150px
		.user
			display flex;
			justify-content flex-end
			align-items center
			cursor pointer
			img 
				width 60px
				height 60px
				border-radius 30px	
			.name
				margin 0 0px 0 20px
				color #fff
				font-size 25px
			a
				border none
				outline none
				padding 10px 20px
				color #fff
				background $Primary
				text-decoration none
			


	.footer
		padding 60px 0
		background #2F2F2F

	.home-content 
		display flex 
		width 1250px
		min-height 100vh
		margin 0 auto 
		.left
			width 250px
		.right
			width 1000px
			padding 25px 0 25px 25px
			
</style>
